import React, { useState } from "react";
import { Snackbar } from "@material-ui/core";
import MuiAlert, { AlertProps } from "@material-ui/lab/Alert";

const Alert = (props: AlertProps) => {
    return <MuiAlert elevation={6} variant="filled" {...props} />;
};
interface MessageOptions {
    message: string;
    type?: "success" | "info" | "warning" | "error";
    duration?: number;
}
let showMessage: (options: MessageOptions) => void;
const Message: React.FC = () => {
    const [open, setOpen] = useState(false);
    const [message, setMessage] = React.useState("");
    const [type, setType] = React.useState<
        "success" | "info" | "warning" | "error"
    >("info");
    const [duration, setDuration] = React.useState(5000);
    showMessage = ({ message, type = "info", duration = 5000 }) => {
        setMessage(message);
        setType(type);
        setDuration(duration);
        setOpen(true);
    };
    return (
        <>
            <Snackbar
                open={open}
                autoHideDuration={duration}
                onClose={() => setOpen(false)}
                anchorOrigin={{ vertical: "top", horizontal: "center" }}
            >
                <Alert severity={type} onClose={() => setOpen(false)}>
                    {message}
                </Alert>
            </Snackbar>
        </>
    );
};

export { showMessage };
export default Message;
